 /*
 * @description: 视频播放组件
 * @Author: along
 * @Date: 2020-03-15
 * @Last Modified by: along
 * @Last Modified time: 2020-03-15
 */
<template>
    <div
        v-if="show"
        class="videoSimple"
        :style="{top: top + 'px', left: left + 'px' }"
    >
        <video
            width="278"
            height="500"
            controls
            autoplay
            loop
            v-if="flag"
        >
            <source
                :src="url"
                type="video/mp4"
            >
        </video>
        <div class="video-fixed" />
        <img
            src="//cdn.zsdx.cn/wxhand/close.png"
            @click="show = false"
            class="el-icon-close"
        />
    </div>
</template>

<script>
export default {
    name: 'VideoSimple',
    props: {
        url: {
            type: String,
            default: () => {}
        },
        top: {
            type: Number,
            default: () => {}
        },
        left: {
            type: Number,
            default: () => {}
        }
    },
    data () {
        return {
            show: false,
            flag: true
        };
    },
    watch: {
        show (val) {
            if(val) {
                this.$nextTick(()=>{
                    this.drag(document.querySelector('.videoSimple'));
                });
            }
        },
        url (url) {
            this.flag = false;
            setTimeout(()=>{
                this.flag = true;
            },60);
        }
    },
    mounted () {
        this.init();
    },
    methods: {
        init () {
            if(!!document.querySelector('.videoSimple') && this.show) {
                this.$nextTick(()=>{
                    setTimeout(()=>{
                        this.drag(document.querySelector('.videoSimple'));
                    },200);
                });
            }
        },

        /**
         * @description 显示视频
         */
        showVideo () {
            this.show = true;
        },

        /**
         * @description 隐藏视频
         */
        hideVideo () {
            this.show = false;
        },

        /**
         * @description 拖动视频
         */
        drag (obj) {
            obj.onmousedown = function(event){
                let e = event || window.event;
                let divX = e.clientX - this.offsetLeft;
                let divY = e.clientY - this.offsetTop;

                if(obj.setCapture){
                    obj.setCapture();
                }

                document.onmousemove = function(event){
                    let e = event || window.event;
                    let disX = e.clientX - divX;
                    let disY = e.clientY - divY;

                    if ( disX < 0 ) {
                        disX = 0;
                    } else if ( disX > document.documentElement.clientWidth - obj.offsetWidth ) {
                        disX = document.documentElement.clientWidth - obj.offsetWidth;
                    }

                    if ( disY < 0 ) {
                        disY = 0;
                    } else if ( disY > document.documentElement.clientHeight - obj.offsetHeight ) {
                        disY = document.documentElement.clientHeight - obj.offsetHeight;
                    }

                    obj.style.top = disY + "px";
                    obj.style.left = disX + "px";

                    document.onmouseup = function(){
                        document.onmousedown = document.onmousemove = null;
                        if( obj.releaseCapture ){
                            obj.releaseCapture();
                        }
                    };
                };
            };
        }
    }
};
</script>

<style lang="less" scoped>
.videoSimple {
    position: fixed;
    width: 278px;
    height: 500px;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 99999999;
    background: #000;
    box-shadow: 0px 0px 20px 0px rgba(98, 152, 214, 0.2);
    .video-fixed {
        width: 278px;
        height: 439px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .el-icon-close {
        width: 24px;
        height: 24px;
        color: #ffffff;
        font-weight: 500;
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
        z-index: 10;
        display: none;
    }

    &:hover {
        .el-icon-close {
            display: block;
        }
    }
}
</style>

<style lang="less">
.videoSimple {
    video {
        outline: none;
    }
}
</style>